<template>
	<view class="user-page">
		<view class="use-msg">
			<view class="user-item" style="align-items: center">
				<view>修改头像</view>
				<view class="avatar-box">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="IMG_URL + userData.avatar"></image>
					</button>
				</view>
			</view>
			<view class="user-item" style="margin-bottom: 20rpx;">
				<view>手机号</view>
				<u-input :clearable="false" v-model="userData.mobile" :disabled="true" input-align="right" />
			</view>
			<view class="user-item">
				<view>昵称</view>
				<u-input maxlength="6" :clearable="false" v-model="userData.nickname" input-align="right"
					placeholder="请输入昵称" />
			</view>
			<view class="user-item">
				<view>性别</view>
				<u-input :disabled="true" :clearable="false" @click="show = true" v-model="sex" input-align="right"
					placeholder="请输入性别" />
				<u-action-sheet style="position: absolute" :list="actionSheetList" v-model="show"
					@click="actionSheetCallback"></u-action-sheet>
			</view>
			<view class="user-item">
				<view>年龄</view>
				<u-input type="number" maxlength="3" :clearable="false" v-model="userData.age" input-align="right"
					placeholder="请输入年龄" />
			</view>
			<view class="user-item">
				<view>个性签名</view>
				<u-input :clearable="false" maxlength="14" v-model="userData.signature" input-align="right"
					placeholder="请输入个性签名" />
			</view>
			<view class="user-item" v-if="flag === false">
				<view>实名认证</view>
				<!-- <u-input :clearable="false" maxlength="14" v-model="userData.signature" input-align="right" placeholder="请输入个性签名"/> -->
				<view @click="real">去实名 ></view>
			</view>
			<view class="user-item" v-if="flag">
				<view>实名认证</view>
				<!-- <u-input :clearable="false" maxlength="14" v-model="userData.signature" input-align="right" placeholder="请输入个性签名"/> -->
				<view>已实名</view>
			</view>
		</view>

		<u-button :clearable="false" :custom-style="customStyle" :loading="isLoading" shape="circle" @click="submit">
			提交修改</u-button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		auditUser,
		getUser
	} from "../../../api/user";
	import {
		pathToBase64
	} from "image-tools";
	import {
		IMG_URL
	} from "../../../config/URL";

	export default {
		name: "index",
		onShow() {
			this.userData = uni.getStorageSync('userInfo')
			this.flag = uni.getStorageSync('realName')
		},
		data() {
			return {
				flag: false,
				IMG_URL,
				isLoading: false,
				customStyle: {
					width: '85%',
					backgroundColor: '#1cd56c',
					color: '#fff',
					marginBottom: '40rpx'
				},
				userData: {},
				actionSheetList: [{
						text: '男',
						value: 2
					},
					{
						text: '女',
						value: 1
					},
				],
				show: false
			}
		},
		computed: {
			sex() {
				let userSex = '';
				if (this.userData.sex == 1) {
					userSex = '女'
				} else if (this.userData.sex == 2) {
					userSex = '男'
				} else {
					userSex = ''
				}
				return userSex
			}
		},
		methods: {
			// 实名跳转
			real() {
				uni.navigateTo({
					url: "/subPages/subUser/realName/index"
				})
			},

			onChooseAvatar(e) {
				pathToBase64(e.detail.avatarUrl).then(data => {
					this.userData.avatar = data
				})
			},

			actionSheetCallback(index) {
				this.userData.sex = this.actionSheetList[index].value;
			},

			async submit() {
				this.isLoading = true
				const res = await auditUser({
					age: this.userData.age,
					avatar: this.userData.avatar,
					mobile: this.userData.mobile,
					nickname: this.userData.nickname,
					sex: this.userData.sex,
					signature: this.userData.signature,
					openid: this.userData.openid
				})

				if (res.data.data == '修改成功') {
					const user = await getUser(this.userData.id)
					uni.setStorageSync('userInfo', user.data.data);

					this.$refs.uToast.show({
						title: '修改成功',
						type: 'success',
					})

					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							animationType: 'pop-out',
							animationDuration: 200
						});
						this.isLoading = false
					}, 1000)
				} else {
					this.$refs.uToast.show({
						title: '修改失败',
						type: 'fail',
					})
					this.isLoading = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f2f2f3;

		.use-msg {
			flex: 1;

			.user-item {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 25rpx;
				align-items: center;
				background-color: #FFFFFF;
				border-bottom: 1px solid #fbfbfc;

				.avatar-box {

					.avatar-wrapper {
						padding: 0rpx;
						width: 100rpx !important;
						height: 100rpx;
						border-radius: 50rpx;

						.avatar {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.user-btn {}
	}
</style>
